#app {
  width: 100%;
  padding: 2rem;
  font-weight: normal;
  min-height: 100vh;
  max-width: 1600px;
  min-width: 40.625rem;
  margin: 0 auto;
}

img {
  width: 50px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

html {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #ffefdf 5.83%, #dceaff 20.31%);
  /* 添加过渡效果以避免切换时闪烁 */
  transition: background 0.3s ease;
  background-attachment: fixed;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  /*color: var(--color-text);*/
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: cover;
  background-attachment: fixed;
}

body i {
  /* 粉红到浅紫 */
  /* background: linear-gradient(45deg, #ff9a9e, #fecfef); */
  /* 蓝色到青色 */
  /* background: linear-gradient(45deg, #4facfe, #00f2fe); */
  /* 蓝色到粉色 */
  background: linear-gradient(45deg, #4facfe, #fbc2eb);
  /* 浅橙到深橙 */
  /* background: linear-gradient(45deg, #f6d365, #fda085); */
  /* 深蓝到青蓝 */
  /* background: linear-gradient(45deg, #2c3e50, #4ca1af); */
  /* 青绿到金黄 */
  /* background: linear-gradient(45deg, #16a085, #f4d03f); */
  /* background: linear-gradient(45deg, #ff6b6b, #fbc531, #4cd137);  */
  -webkit-background-clip: text; /* 将背景剪裁到文字内容 */
  background-clip: text;
  -webkit-text-fill-color: transparent; /* 设置文字透明 */
  /* 添加动画 */
  /* animation: gradient-move 3s infinite linear;  */
  /* 设置背景大小更大，方便平滑移动 */
  /* background-size: 200%;  */
}

/* 响应式断点 */
@media (max-width: 1200px) {
  #app {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  #app {
    padding: 1rem;
  }

  body {
    font-size: 14px;
  }

  /* 禁用移动端双击缩放 */
  * {
    touch-action: manipulation;
  }

  /* 优化移动端滚动 */
  html {
    -webkit-overflow-scrolling: touch;
  }

  :root {
    --width: 10rem;
    --height: 2.25rem;
    --padding: 12px 20px;
  }
}

/* 暗黑模式下的全局样式 */
html.dark {
  background: linear-gradient(
    180deg,
    #203580 0%,
    #443e73 22%,
    #443a66 38.59%,
    #27284f 118.7%,
    #171e44 53.84%
  );
  background-attachment: fixed;
}

html.dark body {
  /* 移除背景色，使用dark.scss中定义的渐变背景 */
  color: var(--el-text-color-primary);
  background: transparent;
  transition: background 0.3s ease;
}

/* 平滑过渡效果 */
html,
body,
#app {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  --htmlWidth: 1600px;
}
/*
html {
  --width: 12.5rem;
  --height: 2.5rem;
  --border-radius: 10px;
  --bg-color: rgba($color: #fff, $alpha: 0.3);
  --padding: 15px 30px;
  --box-shadow: 0 0 10px rgba($color: #000, $alpha: 0.1);
  --margin-top: 20px;
} */
